<template>

  <div>
    <div class="ss">
     <div id="shousuo">
       
          <i class="el-icon-search"></i>
          <span>筛选搜索</span>
        
        <el-button style="float:right" type="primary" @click="onSubmit()" size="small">查询搜索</el-button>
        <el-button
          style="float:right;margin-right: 15px"
          @click="handleResetSearch()"
          size="small"
        >重置</el-button>
      </div>
      <div style="margin-top: 15px,">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" style="text-align: left;margin-left:20px">
            <el-form-item label="">
            <el-select checked v-model="formInline.region" placeholder="搜索类型">
              <el-option  label="查询会员号" value="查询会员号"></el-option>
              <el-option  label="查询电话号" value="查询电话号"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="搜索内容" style="line-height:10px">
            <el-input v-model="formInline.user" placeholder="请输入搜索内容"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
  <div style="position: relative;" >
    <el-table
        :data="currentData"
        border
        style="width: 100%; ">
    <el-table-column
      label="会员号"
      prop="id">
    </el-table-column>
    <el-table-column
      label="姓名"
      prop="name">
    </el-table-column>
    <!-- <el-table-column
      label="密码"
      prop="password">
    </el-table-column> -->
    <el-table-column
      label="性别"
      prop="sex">
    </el-table-column>
    <el-table-column
      label="电话"
      prop="tel">
    </el-table-column>
    <el-table-column
      label="身份证"
      prop="idCard">
    </el-table-column>
    <el-table-column
      label="余额"
      prop="money">
    </el-table-column>
    <el-table-column
      align="center" label = "操作">
      <template slot-scope="scope" >
        <el-button
          size="mini"
          type="primary"
          @click=" handleEdit(scope.$index, scope.row)">余额充值</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">结账</el-button>
      </template>
    </el-table-column>
    </el-table>

    <!-- 分页 -->
        <div class="block">
                
            <!-- 
                  background---设置背景颜色
                  hide-on-single-page---只有一页时隐藏分页
                  :total---总数据数量
                  :page-size---每页显示数据的条数
                  :pager-count---最大可见页码数
                  @current-change---currentPage改变时会触发(会自动获得页码)
                  :current-page---当前页
            -->
            <el-pagination
              background
              hide-on-single-page
              layout="prev, pager, next"
              :total="pageNum"
              :page-size="pageSize"
              :pager-count="pageCount"
              @current-change="changePage"
              :current-page="currentPage"
            ></el-pagination>
        </div>
    </div>
    
    <!-- 结账 -->
      <div>
        <el-dialog title="会员验证" :visible.sync="outerVisible" style="width: 1000px;margin-left:470px">
          <div style="margin-left:0px;width: 400px">
            <el-form :model="editform" status-icon :rules="rules" ref="editform" label-width="100px" class="demo-ruleForm">
              <el-form-item label="电话" prop="userTel">
                <el-input type="userTel" v-model="editform.userTel" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="jzPass">
                <el-input type="password" v-model="editform.jzPass" autocomplete="off"></el-input>
              </el-form-item>
              
              <el-form-item>
                <el-button type="primary" @click="submitForm('editform')">提交</el-button>
                <el-button @click="resetForm('editform')">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
          
          <el-dialog width="30%" title="会员结账" :visible.sync="innerVisible" append-to-body>
            <div slot="footer" class="dialog-footer">
            <el-form :model="editform" status-icon :rules="rules" ref="editform" label-width="100px" class="demo-ruleForm">
              
              <el-form-item label="订单金额" prop="price" style="margin-left:100px">
                <el-input type="price" v-model="this.$store.state.zlStore.payInfo.price" autocomplete="off" disabled="" style="width:200px;float: left;"></el-input>
              </el-form-item>
              <el-form-item label="会员余额" prop="money" style="margin-left:100px">
                <el-input type="money" v-model="editform.money" autocomplete="off" disabled="" style="width:200px;float: left;"></el-input>
              </el-form-item>
              <el-form-item >
                <el-button type="primary" @click="jzsubmitForm('editform')">提交</el-button>
                <el-button @click="resetForm('editform')">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
          </el-dialog>
          
        </el-dialog>
      </div>
        
    <!-- 充值     -->
      <div>
        <el-dialog title="会员充值" :visible.sync="chongzhiVisible" style="width: 1000px;margin-left:470px">
          <div style="margin-left:0px;width: 400px">
            <el-form :model="editform" status-icon ref="editform" label-width="100px" class="demo-ruleForm">
              <el-form-item label="会员号" prop="id">
                <el-input type="money" v-model.number="editform.id" autocomplete="off" disabled=""></el-input>
              </el-form-item>
              <el-form-item label="会员余额" prop="money">
                <el-input type="money" v-model.number="editform.money" autocomplete="off" disabled=""></el-input>
              </el-form-item>
              <el-form-item label="会员充值" prop="addMoney">
                <el-input type="addMoney" v-model.number="editform.addMoney" autocomplete="off"></el-input>
              </el-form-item>
              
              <el-form-item>
                <el-button type="primary" @click="chongzhi('editform')">确定</el-button>
                <el-button @click="czResetForm('editform')">取消</el-button>
              </el-form-item>
            </el-form>
          </div>
          
          <el-dialog width="30%" title="内层 Dialog" :visible.sync="innerVisible" append-to-body>
          </el-dialog>
          <!-- <div slot="footer" class="dialog-footer">
            <el-button @click="outerVisible = false">充值</el-button>
            <el-button type="primary" @click="innerVisible = true">结账</el-button>
          </div> -->
        </el-dialog>
      </div> 
        

  </div>
</template>

<script>
import { mapActions } from "vuex";
import http from "../../http/http";
  export default {
    data() {
      
      return {
          formLabelWidth:"120px",
          outerVisible: false,
          chongzhiVisible:false,
          innerVisible: false,
          currentPage: 1, //当前页
          pageSize: 5, //显示数据条数
          pageCount: 7,//页码最大显示数
          
        rules: {
          // tel: [
          //   { validator: validateTel , trigger: 'blur'}
          // ],
          // jzPass: [
          //   { validator: validatejzPass , trigger: 'blur'}
          // ]
        },
        editform:{
          id:"",
          name:"",
          password:"",
          sex: "",
          tel: "",
          idCard:"",
          money:'',
          
        },
        formInline: {
                user: "",
                region: ""
            },
            demo:[],
            rules: {
        },
        // search: '',
        
      }
      
    },
    created(){
     
        this.allHuiyuan();
        
      },
    computed:{
      currentData(){
        let start = (this.currentPage - 1) * this.pageSize;
        let end = this.currentPage * this.pageSize;
        return this.$store.state.zlStore.demo.slice(start,end);
        
      },
      
      pageNum(){
       return this.$store.state.zlStore.demo.length;
       
      }
    },
   
    methods: {
      ...mapActions(["allHuiyuan"]),
      if (condition) {
        
      },
      // 充值按钮
      handleEdit(index, row) {

        this.chongzhiVisible = true
        this.editform = row
        // console.log(index, row.sex);
        //  console.log(this.$store.state.zlStore.demo.sex)
      },
      // 结账按钮
      handleDelete(index, row) {
        this.outerVisible = true
        this.editform = row
        console.log(index, row);
      },

      // 搜索
      onSubmit(){
        // console.log(this.formInline.user)
        // console.log(this.formInline.region)
       if(this.formInline.user !=""&& this.formInline.region !=""){
         
         if(this.formInline.region == "查询会员号"){
           http({
             url:'/website/Employeecontroller/selectUser',
             method:"post",
             data:{
               inputValue: this.formInline.user,
               selectValue :"查询会员号"
             }
           }).then(res => {
            //  console.log(res.data);
             console.log(123)
             this.$store.state.zlStore.demo = res.data;
           })
         }
          if(this.formInline.region == "查询电话号"){
            http({
             url:'/website/Employeecontroller/selectUser',
             method:"post",
             data:{
               inputValue: this.formInline.user,
               selectValue :"查询电话号"
             }
           }).then(res => {
            //  console.log(res.data);
             console.log(123)
             this.$store.state.zlStore.demo = res.data;
           })
           
          }
       }else{
         console.log(456)
         this.$confirm("您的查询内容为空！请重新检查后再输入！", "提示", {
          confirmButtonText: "确定",
          // cancelButtonText: "取消",
          type: "warning"
        });
       }
      },
      handleResetSearch(){
      this.formInline.user = "";
      this.formInline.region = "";
      this.allHuiyuan();
      },
      changePage(val){
          this.currentPage = val;
      },
        // 结账界面的两个按钮的方法
      
      submitForm(){
        if(this.editform.tel==this.editform.userTel){
         if(this.editform.jzPass == this.editform.password){
           this.innerVisible = true
           this.outerVisible = false
         }else{
          this.$message({
            type: "success",
            message: "密码错误!"
            });
          }
        }else{
          this.$message({
            type: "success",
            message: "用户不存在!"
          });
        }
      },
      resetForm(){
        this.chongzhiVisible=false
        this.$message({
            type: "success",
            message: "已取消!"
          });
      },

      jzsubmitForm(){
         http({
             url:'/website/Employeecontroller/updateMemberByUserId',
             method:"post",
             data:{
               userId:this.editform.id,
               money: -this.$store.state.zlStore.payInfo.price
             }
           }).then(res => {
            //  console.log(res.data);
            this.allHuiyuan();
           })
           
        console.log(this.$store.state.zlStore.payFlag)
        this.$store.state.zlStore.payFlag = true
        console.log(this.$store.state.zlStore.payFlag)
        this.$store.state.zlStore.payFlag = false
         console.log(this.$store.state.zlStore.payFlag)
        this.innerVisible = false
        this.$message({
            type: "success",
            message: "结账成功!"
          });
      },
      //余额充值的两个按钮
      chongzhi(){
        http({
             url:'/website/Employeecontroller/updateMemberByUserId',
             method:"post",
             data:{
               userId:this.editform.id,
               money:this.editform.addMoney
             }
           }).then(res => {
            //  console.log(res.data);
             console.log(123)
             this.allHuiyuan();
            //  this.$store.state.zlStore.demo = res.data;
           })

        // console.log(this.editform.addMoney)
        // console.log(this.editform.money)
        // console.log(this.editform.id)
        // this.editform.money = this.editform.addMoney+parseInt(this.editform.money) ;
        this.chongzhiVisible=false;
        this.editform.addMoney = ""
        this.$message({
            type: "success",
            message: "已充值!"
          });
      },
      czResetForm(){
        this.chongzhiVisible=false;
        this.editform.addMoney = ""
        this.$message({
            type: "success",
            message: "已取消!"
          });
      },


      
    },
  }
</script>
<style lang="less"  scoped>
.block {
  position: absolute;
  left: 40%;
  // bottom: 5%;
  height: 32px;
}
#shousuo{
  text-align: left;
  width: 1590px;
  padding-left: 10px;
}
#shousuo>button{
  margin-right: 30px;
  margin-top: 20px;
}
.ss{
  background-color: white;
  
  width: 1629px;
  margin-bottom: 10px;
  height: 138px;
  line-height: 50px;
  // padding: 3px;
}

.el-input.is-disabled .el-input__inner>input{
  color: black !important;
  
}
</style>